<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/eui.css">

<!--    内部样式，写在页面里的-->
    <style>
        /*左侧区域*/
        #recom{
            /*定义边框*/
            /*border: 1px solid #000;*/
            width: 65%;
            /*height: 550px;*/
            display: inline-block;
        }
        /*右侧区域*/
        #righ{
            /*定义边框*/
            /*border: 1px solid #000;*/
            width: 40%;
            height: 550px;
            display: inline-block;
            margin-left: 10px;
        }

        /*首页推荐悬停*/
        #recom a h5:hover{
            color: red;
        }

        /*头条热榜悬停*/
        .hot_list a span:hover{
            color: red;
        }
        /*热门视频悬停*/
        .hot_video_list a span:hover{
            color: red;
        }

    </style>


</head>

<body>
    <div id="app">
        <!--    导航栏-->
        <nav class="navbar  bg-dark navbar-dark">

            <ul class="nav ">
                <li class="nav-item">
                    <a style="color: #ebebeb" class="nav-link" href="#">关于</a>
                </li>
                <li class="nav-item">
                    <a style="color: #ebebeb" class="nav-link" href="#">反馈</a>
                </li>
                <li class="nav-item">
                    <a style="color: #ebebeb" class="nav-link" href="#">投诉</a>
                </li>
            </ul>

            <!-- Links -->
            <ul class="nav justify-content-end">
                <!-- Dropdown -->
                <li class="nav-item dropdown justify-content-end">
                    <a style="color: #ebebeb" class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                        发布作品
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="./publish_article.html">发布文章</a>
                        <a class="dropdown-item" href="./publish_album.html">发布相册</a>
                        <a class="dropdown-item" href="./publish_micro.html">发布头条</a>
                        <a class="dropdown-item" href="./publish_questions_Answers.html">发布问答</a>
                        <a class="dropdown-item" href="./publish_video.html">发布视频</a>
                    </div>
                </li>
                <li class="nav-item dropdown justify-content-end">
                    <a v-if="isLogin" style="color: #ebebeb" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                        {{user.nickname}}
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="/home_page.html">个人主页</a>
                        <a class="dropdown-item" href="/creation_platform.html">创作平台</a>
                        <a class="dropdown-item" href="/home_page.html">我的收藏</a>
                        <a class="dropdown-item" href="javascript:void(0)" @click="logout()">退出登录</a>
                    </div>
                    <a v-if="!isLogin" style="text-decoration-line: none;color: white" href="./login.html"><button type="button" class=" nav-link btn btn-danger btn-sm" >登录</button></a>
                </li>
            </ul>
        </nav>
        <!--    遮罩-->
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h2 >今日头条</h2>
                <p>在头条看世界</p>

                <div class="form-inline">
                    <input type="text"  style="width: 90%" class="form-control" >
                    &nbsp;
                    <div class="input-group-append">
                        <button type="button" style="width: 100px" class="btn btn-primary">
                            <a href="./list.html" style="color: white;text-decoration-line: none">
                                搜索
                            </a>
                        </button>
                    </div>

                </div>
            </div>
        </div>
        <!--    二级导航栏-->
        <div class="container">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link active" data-toggle="tab" href="#Diy" @click="getNavData('focus_on', user.id)">关注</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy" @click="getNavData('recommend')">推荐</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">热点</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">南宁</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">财经</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">科技</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">美食</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">体育</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">娱乐</a>
                </li>
                <li class="nav-item">
                    <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#Diy">更多</a>
                </li>
            </ul>
        </div>
        <!--    主体-->
        <div class="container" style="display: flex">

            <!--左侧-->
            <div id="recom">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="Diy" class="container tab-pane active" v-if="navIsShow"><br>
                        <div v-for="navData in navDatas"  class="card" style="border:none">
                            <!-- 四个图 -->
                            <div class="card-body" v-if="navData.urlArr.length == 4">
                                <a href="#" style="text-decoration-line: none;color: black"><h5 class="card-title">{{navData.content}}</h5></a>
                                <!--<p class="card-text">西甲第30轮比赛，塞尔塔主场迎接皇家马德里的挑战，最终以1-2的比分不敌皇马。然而在赛后数据统计里，无论是控球率、进攻次数、还是角球，塞尔塔都要优于皇马，那么皇马又是凭借什么战术赢下这场比赛的呢？</p>-->
                                <span class="card-link" style="color: #8c939d">{{navData.nickName}}</span>
                                <span  class="card-link" style="color: #8c939d">{{navData.comment}}评论</span>
                                <span class="card-link" style="color: #8c939d">{{navData.createTime}}</span>
                                <br/>
                                <br/>
                                <div style="display: flex">
                                    <img v-for="imgUrl in navData.urlArr" :src="'img' + imgUrl" width="24%" style="padding: 0 5px">
                                </div>
                            </div>
                            <!-- 一个图 -->
                            <div class="card-body" style="display: flex" v-else-if="navData.urlArr.length == 1">
                                <div style="width: 73%">
                                    <a href="#" style="text-decoration-line: none;color: black"><h5 class="card-title">{{navData.content}}</h5></a>
                                    <!--<p class="card-text">北京时间4月3日00:30，西甲联赛第30轮，本泽马点球3罚2中，诺利托破门难救主，最终皇马客场2-1战胜塞尔塔。在多赛1场的情况下，皇马跟西甲第2的塞维利亚拉开12分的差距。</p>-->
                                    <a href="#" class="card-link" style="color: #8c939d">{{navData.nickName}}</a>
                                    <a href="#" class="card-link" style="color: #8c939d">{{navData.comment}}评论</a>
                                    <a href="#" class="card-link" style="color: #8c939d">{{navData.createTime}}</a>
                                </div>
                                <div style="width: 3%"></div>
                                <div style="width: 24%">
                                    <img v-for="imgUrl in navData.urlArr" :src="'img' + imgUrl" height="92px">
                                </div>
                            </div>
                            <!-- 没有图 -->
                            <div class="card-body" v-else>
                                <a href="#" style="text-decoration-line: none;color: black"><h5 class="card-title">{{navData.content}}</h5></a>
                                <!--<p class="card-text">北京时间4月3日00:30，西甲联赛第30轮，本泽马点球3罚2中，诺利托破门难救主，最终皇马客场2-1战胜塞尔塔。在多赛1场的情况下，皇马跟西甲第2的塞维利亚拉开12分的差距。</p>-->
                                <a href="#" class="card-link" style="color: #8c939d">{{navData.nickName}}</a>
                                <a href="#" class="card-link" style="color: #8c939d">{{navData.comment}}评论</a>
                                <a href="#" class="card-link" style="color: #8c939d">{{navData.createTime}}</a>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <el-card class="box-card" style="height: 200px">
                            <h2 style="width: 200px;margin: 0 auto">您尚未登录</h2>
                        </el-card>
                    </div>
                </div>
            </div>

            <!--右侧-->
            <div id="righ">

                <div id="myInfo">
                    <!--个人资料面板-->
                    <div v-if="isLogin" class="card" style="width: 100%;border: none">

                        <!--数据统计-->
                        <div class="card-body" style="background-color: #F2F6FC">
                            <a href="./home_page.html" style="text-decoration-line: none;color: black"><h4><b>{{user.nickname}}</b></h4></a>
                            <div style="display: flex">
                                <!--获赞-->
                                <div class="card  text-black" style="height:50%;width: 30%; border: none">
                                    <div class="card-body"><b>{{user.fabulous}}</b><br>获赞</div>

                                </div>
                                <!--粉丝-->
                                <div class="card  text-black" style="height:50%;width: 30%; margin-left: 18px; border: none">
                                    <div class="card-body"><b>{{user.fans}}</b><br>粉丝</div>
                                </div>
                                <!--关注-->
                                <div class="card  text-black" style="height:50%;width: 30%; margin-left: 18px; border: none">
                                    <div class="card-body"><b>{{user.follow}}</b><br>关注</div>
                                </div>
                            </div>
                        </div>
                        <!--发表作品-->
                        <div class="card-body" style="background-color: #F2F6FC;display: flex">
                            <!--写文章-->
                            <div class="card  text-black" style="height:100%;width: 100%; border: none">
                                <div class="card-body" style="font-size: xx-small">
                                    <a href="./publish_article.html" style="text-decoration-line: none;color: black;">
                                        <img class="card-img-right" src="./img/article_icon.svg" alt="Card image" style="width:100%"><br>写文章
                                    </a>
                                </div>
                            </div>
                            <!--写微头条-->
                            <div class="card  text-black" style="height:100%;width: 100%; border: none">
                                <div class="card-body" style="font-size: xx-small">
                                    <a href="./publish_micro.html" style="text-decoration-line: none;color: black;">
                                        <img class="card-img-right" src="./img/wtt_icon.svg" alt="Card image" style="width:100%"><br>写微头条
                                    </a>
                                </div>
                            </div>
                            <!--写问答-->
                            <div class="card  text-black" style="height:100%;width: 100%; border: none">
                                <div class="card-body" style="font-size: xx-small">
                                    <a href="./publish_questions_Answers.html" style="text-decoration-line: none;color: black;">
                                        <img class="card-img-right" src="./img/wenda_icon.svg" alt="Card image" style="width:100%"><br>写问答
                                    </a>
                                </div>
                            </div>
                            <!--发视频-->
                            <div class="card  text-black" style="height:100%;width: 100%; border: none">
                                <div class="card-body" style="font-size: xx-small">
                                    <a href="./publish_video.html" style="text-decoration-line: none;color: black;">
                                        <img class="card-img-right" src="./img/video_icon.svg" alt="Card image" style="width:100%"><br>发视频
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--未登录-->
                    <div v-if="!isLogin" class="card" style="width: 100%; height: 200px; border: none">
                        <!--引导面板-->
                        <div class="card-body" style="background-color: #F2F6FC">
                            <div style="text-align: center">
                                <span>登录后头条更懂你</span>
                                <br>
                                <span style="top: 20px">内容更有趣</span>
                                <br>
                                <br>
                                <a style="text-decoration-line: none;color: white" href="./login.html"><button style="margin-left: 37.3%" type="button" class=" nav-link btn btn-danger btn" >立即登录</button></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--头条热榜-->
                <h4>头条热榜</h4>
                <div class="card hot_list" style="border:none">
                    <div :key="article.title" class="card-body" v-for="(article,index) in hotArticle">
                        <a href="#" style="text-decoration-line: none;color: black"><h4 style="color: #b21f2d;display: inline-block">{{index + 1}}</h4>&nbsp;&nbsp;<span
                                class="card-title">{{article.title}}</span></a>
                        <br>
                    </div>
                </div>

                <!--热门视频-->
                <h4>热门视频</h4>
                <div class="card hot_video_list" style="border:none">
                    <div class="card-body" v-for="video in hotVideo">
                        <div class="video-item" style="display: flex;width: 100%;height: 10%;">
                            <div class="img-left" style="width: 50%;"><a href="#"><img :src="video.imgUrl" height="100%" width="100%"></a></div>
                            <div class="content-right" style="width: 50%;margin-left: 10px">
                                <a href="#" style="color: black;text-decoration-line: none"><span>{{video.title}}</span></a>
                                <br>
                                <span style="color: red; background-color: #fef0f0;">{{video.comment}}评论</span>
                                <br>
                                <span style="color: #95999c;font-size: small">{{video.views}}次观看</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                                    style="color: #95999c;font-size: small">{{video.nickname}}</span>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>


            </div>

        </div>
    </div>
    <!--引入axios框架-->
    <script src="/js/vue/axios.min.js"></script>
    <!--引入Vue框架-->
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/eui.js"></script>
    <script>
        let v = new Vue({
            el: "#app",
            data: {
                keyword: "",
                isLogin: false,
                user: {
                    id: null,
                    nickname: null,
                    username: null,
                    fabulous: null,
                    fans: null,
                    follow: null
                },
                hotArticle: [],
                hotVideo: [],
                navDatas: [],
                // 主要是控制“关注”那里是否显示“您尚未登录”
                navIsShow: false
            },
            methods: {
                //个人信息面板
                getMe: function () {
                    axios.get("/wemedia/ddUser/me").then(function (response) {
                        if (response.data.success == true){
                            //获取个人信息成功
                            v.isLogin = true;
                            v.user = response.data.data;
                        } else{
                            //未登录或获取个人信息失败
                            console.log(response.data.msg);
                        }
                    });
                },
                //登出
                logout: function () {
                    axios.get("/wemedia/ddUser/logout").then(function (response) {
                        if (response.data.success){
                            //清空个人用户信息
                            v.user = null;
                            location.href="/index.html";
                        }
                    });
                },
                // 获取导航栏数据
                getNavData(type, parameter) {
                    // 先判断是否是“关注”
                    if (type == 'focus_on') {
                        // 直接判断“用户id”是否为空，是空说明没登录，把“v.navIsShow”设置为false，
                        if (v.user.id == null) {
                            v.navIsShow = false;
                            // 然后直接把方法给干死，后面都他妈的不给执行
                            return;
                        }
                    }
                    // 没有参数时的查询
                    if (parameter == null) {
                        axios.get('/wemedia/index/' + type +'/listAll').then(function (res) {
                            // 把数据赋值给“navDatas”这个数组
                            v.navDatas = res.data.data;

                            // 下面做的是：动态的给每一个“navData”对象添加一个“urlArr”属性
                            // “urlArr”这个属性是用于存放图片路径的
                            for (let navData of v.navDatas) {
                                /**
                                 * “navData.imgUrls”是用来存放图片信息的，等于空的话就直接跳过
                                 * 给“navData.urlArr”赋值一个“[]”，如果不判断 “navData.imgUrls”
                                 * 就得到“null”然后“navData.imgUrls.split(',');”这里就直接他奶奶的炸裂，
                                 * 就报错，就很tm的烦
                                 */
                                if (navData.imgUrls != null) {
                                    navData.urlArr = navData.imgUrls.split(',');
                                    continue;
                                }
                                navData.urlArr = [];
                            }
                            // 别忘了最后把这个东西设为true，不然你怎么点都是显示“您尚未登录”
                            v.navIsShow = true;
                        })
                    }
                }
            },
            created: function () {
                //加载个人信息面板
                this.getMe();

                /*获取全站文章热度排行*/
                axios.get('/wemedia/ddArticle/general/getHotArticle').then(function (response) {
                    for (let article of response.data.data) {
                        v.hotArticle.push(article)
                    }
                })

                /*获取全站视频热度排行*/
                axios.get('/wemedia/ddVideo/general/getHotVideo').then(function (response) {
                    for (let video of response.data.data) {
                        if (video.imgUrl === null) {
                            video.imgUrl = "./img/default_cover";
                        }
                        v.hotVideo.push(video)
                    }
                })
            }
        });

    </script>


</body>
</html>